<template>
    <view class="record">
        <uni-swiper-dot :info="info" :current="current" :dots-styles="dotsStyles"  field="content" :mode="mode">
            <swiper class="swiper-box" @change="change" :style="{height: swiperHeight}" >
                <swiper-item v-for="(item ,index) in info" :key="index">
                    <image :src="item.url" class="img" mode="scaleToFill"></image>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>
        <view class="button_box button_begin"  style="display: none" @click="beginRecord">
            <view class="button_box_list">
                <view class="button button_b"><text class="iconfont begin_r">&#xe61a;</text></view>
                <text class="button_b_t">开始录制</text>
            </view>
        </view>
        <view class="button_box" >
            <view class="button_box_list relative_t"  style="display: none">
                <view class="button button_s"><text class="iconfont begin_b" style="position: relative;right:-4upx">&#xe619;</text></view>
                <text class="button_s_t">试听</text>
            </view>
            <view class="button_box_list relative_t" @click="returnRecord">
                <view class="button button_s"><text class="iconfont begin_l">&#xe617;</text></view>
                <text class="button_s_t">重新录制</text>
            </view>
            <view class="button_box_list relative_t"  style="display: none" >
                <view class="button button_s"><text class="iconfont begin_b">&#xe620;</text></view>
                <text class="button_s_t">00:00</text>
            </view>
            <view class="button_box_list" style="display: none">
                <view class="button button_b"><text class="iconfont begin_s">&#xe61f;</text></view>
                <text class="button_b_t">正在录制</text>
                <text class="button_s_t">00:13</text>
            </view>
            <view class="button_box_list" >
                <view class="button button_b"><text class="iconfont begin_s">&#xe620;</text></view>
                <text class="button_b_t">录制已暂停</text>
                <text class="button_s_t">00:13</text>
            </view>
           <view class="button_box_list relative_t" @click="completeRecord">
               <view class="button button_s"><text class="iconfont begin_w">&#xe61b;</text></view>
               <text class="button_s_t" >完成录制</text>
           </view>
        </view>
<!--        倒计时-->
        <view class="count_down">
            <uni-popup ref="popup_d"  :maskClick="false" type="center">
                <view class="popub_box">
                    <text class="num">1</text>
                    <text class="text">秒后开始录制</text>
                </view>
            </uni-popup>
        </view>
<!--        发布-->
        <view class="fa_bu">
            <uni-popup ref="popup" :maskClick="false" type="center">
                <view class="popub_box">
                    <view class="title">录制完成，发布到首页</view>
                    <view class="des">
                        <view class="img_box">
                            <image src="/static/img/img01.png" class="img" mode="scaleToFill"></image>
                        </view>
                        <view>
                            <view class="tname">登鹳雀楼</view>
                            <view class="pname">圈圈</view>
                        </view>
                    </view>
                    <view class="text_areas">
                        <textarea class="textarea"  placeholder-class="place-placeholder"  placeholder="写一写自己的想法，可以吸引更多的收听哦～"/>
                    </view>
                </view>
                <view class="popub_btn">
                    <view class="fa_btn cancel" @click="cancelFaBu">取消</view>
                    <view class="fa_btn confirm" @click="faBu">发布到首页</view>
                </view>
            </uni-popup>
        </view>
<!--        是否分享-->
        <view class="upload">
            <uni-popup ref="popup_s" type="center">
                <view class="popub_box">
                    <image src="/static/img/chenggong@2x.png" class="img_01"></image>
                    <view class="title">作品上传成功</view>
                    <view class="des">读的很棒哦！分享给大家听吧～</view>
                    <view class="share">
                        <view class="share_l" @click="share">
                            <image src="/static/img/weixin@2x.png" class="img_02"></image>
                            <view class="name" >微信好友</view>
                        </view>
                        <view class="share_l" @click="share">
                            <image src="/static/img/pyq@2x.png" class="img_02"></image>
                            <view class="name" >朋友圈</view>
                        </view>
                    </view>
                </view>
            </uni-popup>
        </view>
<!--        保存图片分享-->
        <view class="save_img">
            <uni-popup ref="popup_i"  type="center">
                <view class="popub_box">
                    <view class="box">
                        <view class="title">
                            <view class="name_img"></view>
                            <view class="name">
                                <view class="name1">Iris宝贝</view>
                                <view class="des">录了一段故事送给你快来听听吧！</view>
                            </view>
                        </view>
                        <view class="long_img">
                            <image src="/static/img/luzhi.png" class="img" mode="scaleToFill"></image>
                        </view>
                        <view class="qr_img">
                            <view class="qr">
                                <image src="/static/img/luzhi.png" class="img" mode="scaleToFill"></image>
                            </view>
                            <view class="des">
                                <view>长按识别图中二维码</view>
                                <view>可立即收听好友配音</view>
                            </view>
                        </view>
                    </view>
                    <view class="save_to">保存图片至相册</view>
                </view>

            </uni-popup>
        </view>
<!--        确定是否重新录制-->
        <view class="return_record">
            <uni-popup ref="popup_r02" :maskClick="false" type="center">
                <view class="popub_box">
                    <text class="iconfont cancel_icon" @click="close_return02">&#xe615</text>
                    <view>你的录音未保存,确认放弃吗？</view>
                </view>
                <view class="popub_btn">
                    <view class="fa_btn confirm">重新录制</view>
                    <view class="fa_btn cancel">确认放弃</view>
                </view>
            </uni-popup>
        </view>
<!--        确定重新录制-->
        <view class="return_record">
            <uni-popup ref="popup_r01" :maskClick="false" type="center">
                <view class="popub_box">
                    <text class="iconfont cancel_icon" @click="close_return01">&#xe615</text>
                    <view>确定要重新录制吗？</view>
                </view>
                <view class="popub_btn">
                    <view class="fa_btn confirm">重新录制</view>
                    <view class="fa_btn cancel">取消</view>
                </view>
            </uni-popup>
        </view>
    </view>
</template>

<script>
    import {uniSwiperDot,uniPopup} from "@dcloudio/uni-ui"
    export default {
        components: {uniSwiperDot,uniPopup},
        data() {
            return {
                info: [{
                    url: '/static/img/luzhi.png'
                }, {
                    url: '/static/img/luzhi.png'
                }, {
                    url: '/static/img/luzhi.png'
                }],
                dotsStyles:{
                    width: 8,
                    height:8,
                    bottom: 0,
                    selectedBackgroundColor:'#fcb300',
                    backgroundColor:'#ffffff',
                    border:'1px solid #ffffff',
                    selectedBorder:'1px solid #ffffff',
                },
                current: 0,
                mode: 'dot',
                indicatorDots: true,
                autoplay: false,
                interval: 2000,
                duration: 500,
                swiperHeight: '0px'
            }
        },
        mounted() {
            // this.$refs.popup_i.open()
            // this.$refs.popup_d.open()
            // this.$refs.popup_s.open()
            // this.$refs.popup.open()
            // this.$refs.popup_r01.open()
            // this.$refs.popup_r02.open()
            let _self = this;
            uni.setNavigationBarTitle({
                title: '登鹳雀楼'
            });
            uni.getSystemInfo({
                success: function(res) {
                    _self.swiperHeight = res.windowHeight+'px';
                    _self.dotsStyles.bottom = res.windowHeight-30;
                }
            });
        },
        methods: {
            beginRecord() {  // 开始录制前倒计时
                this.$refs.popup_d.open()
            },
            share() {  // 小程序分享都是保存绘制的图片
                this.$refs.popup_s.close()
                this.$refs.popup_i.open()
            },
            close_return01() {
                this.$refs.popup_r01.close()
            },
            close_return02() {
                this.$refs.popup_r02.close()
            },
            faBu() {  // 确定发布
                this.$refs.popup.close()
                this.$refs.popup_s.open()
            },
            cancelFaBu() {  // 取消发布
                this.$refs.popup.close()
            },
            change(e) {
                this.current = e.detail.current;
            },
            completeRecord() {  //  完成录制
                this.$refs.popup.open()
            },
            returnRecord() {  // 重新录制
                this.$refs.popup_r.open()
            }
        }
    }
</script>


<style lang="scss">
    .place-placeholde{
        font-size: $uni-font-size-14;
        color: $uni-color-876a48;
        opacity: 0.5;
    }
    .record{
        position: relative;
        width: 100%;
        height: 100%;
        .count_down{
            .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
                top: -150upx;
                width: 250upx;
                height: 250upx;
                border-radius: 50%;
                background-color: rgba(0,0,0,0.6);
                overflow: hidden;
                position: relative;
            }

            .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
                padding: 0upx;
            }
            .popub_box{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .num{
                    font-size: 128upx;
                    font-weight: 600;
                    color: $uni-color-fffbf0;
                }
                .text{
                    font-size: $uni-font-size-13;
                    color: #ffffff;
                }
            }
        }
        .save_img{
            .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
                width: 610upx;
                height: 1040upx;
                background-color: rgba(0,0,0,0.0);
                position: relative;
            }
            .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
                padding: 0upx;
            }
            .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
                max-width: 100%;
                max-height: 100%;
                overflow: hidden;
            }
                .popub_box{

                .box{
                    box-sizing: border-box;
                    width: 100%;
                    height: 910upx;
                    background-color: #fff;
                    border: 2upx solid #707070;
                    border-radius: 20upx;
                    padding: 50upx;
                    .title{
                        box-sizing: border-box;
                        width: 499upx;
                        height: 150upx;
                        margin-bottom: 40upx;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        .name_img{
                            width: 118upx;
                            height: 118upx;
                            border: 2upx solid $uni-color-fcb300;
                            border-radius: 50%;
                        }
                        .name{
                            width: 359upx;
                            height: 150upx;
                            box-sizing: border-box;
                            box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.1);
                            background-color: $uni-color-fffbf0;
                            padding: 15upx 53upx;
                            .name1{
                                color: $uni-color-fcb300;
                                font-size: $uni-font-size-14;
                                line-height: 40upx;
                            } .des{
                                color: $uni-color-664e37;
                                font-size: $uni-font-size-14;
                                line-height: 40upx;
                            }
                        }
                    }
                    .long_img{
                        width: 500upx;
                        height: 500upx;
                        border-radius: 10upx;
                        border: 2upx solid #eee;
                        overflow: hidden;
                        .img{
                            width: 500upx;
                            height: 500upx;
                        }
                    }
                    .qr_img{
                        width: 100%;
                        margin-top: 40upx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .qr{
                            width: 80upx;
                            height: 80upx;
                            border: 2upx solid #707070;
                            .img{
                                width: 80upx;
                                height: 80upx;
                            }
                        }
                        .des{
                            font-size:$uni-font-size-13 ;
                            color:$uni-color-664e37 ;
                            padding-left: 10upx;
                            line-height: 38upx;
                        }
                    }
                }
                .save_to{
                    width: 330upx;
                    height: 100upx;
                    background-color:$uni-color-fcb300 ;
                    border-radius: 60upx;
                    text-align: center;
                    font-size:$uni-font-size-base ;
                    color: #fffbf0;
                    line-height: 100upx;
                    margin: 26upx auto 0;
                }
            }

        }
        .fa_bu{
            .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
                top: -150upx;
                width: 600upx;
                height: 580upx;
                border-radius: 20upx;
                overflow: hidden;
                position: relative;
            }

            .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
                padding: 0upx;
            }
            .popub_box{
                padding: 40upx 50upx 0;
                .title{
                    font-size: $uni-font-size-16;
                    color: $uni-color-664e37;
                    line-height: 46upx;

                }
                .des{
                    display: flex;
                    align-items: center;
                    margin: 21upx 0 27upx;
                    .img_box{
                        width:120upx;
                        height: 120upx;
                        border-radius: 10upx;
                        overflow: hidden;
                        margin-right: 20upx;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .tname{
                        font-size: $uni-font-size-base;
                        color: $uni-color-664e37;
                        line-height: 48upx;
                    }
                    .pname{
                        color: $uni-color-876a48;
                        font-size: $uni-font-size-14;
                        line-height: 40upx;
                    }
                }
                .text_areas{
                    .textarea{
                        box-sizing: border-box;
                        width: 100%;
                        height: 190upx;
                        border: 2upx solid $uni-color-876a48;
                        opacity: 0.5;
                        font-size: $uni-font-size-12;
                        border-radius: 10upx;
                        padding: 24upx 50upx 0;
                    }
                }

            }
            .popub_btn{
                width: 100%;
                height: 100upx;
                position: absolute;
                bottom: 0upx;
                left: 0upx;
                background-color: #eeeeee;
                display: flex;
                .fa_btn{
                    width: 50%;
                    height: 100upx;
                    line-height: 100upx;
                    text-align: center;
                    font-size:$uni-font-size-base ;
                }
                .cancel{
                    background-color: $uni-color-fffbf0;
                    color: $uni-color-664e37;
                }
                .confirm{
                    background-color:$uni-color-fcb300;
                    color: #ffffff;
                }
            }
        }
        .upload {
            .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
                top: -150upx;
                width: 500upx;
                height: 500upx;
                border-radius: 20upx;
                overflow: hidden;
                position: relative;
            }
            .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
                padding: 0upx;
            }
            .popub_box{
                box-sizing: border-box;
                padding: 50upx 0 30upx;
                display: flex;
                flex-direction: column;
                align-items: center;
                .title{
                    font-size: $uni-font-size-base;
                    color: $uni-color-664e37;
                    line-height: 40upx;
                    padding-top: 30upx;
                }.des{
                     font-size: $uni-font-size-13;
                     color: $uni-color-664e37;
                     line-height: 40upx;
                    padding-bottom: 66upx;
                     opacity: 0.8;
                 }
                .img_01{
                    width: 100upx;
                    height: 100upx;
                }
                .share{
                    width: 100%;
                    box-sizing: border-box;
                    padding: 0 100upx;
                    display: flex;
                    justify-content: space-between;
                    .share_l{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .name{
                            font-size: $uni-font-size-13;
                            color: $uni-color-664e37;
                            opacity: 0.8;
                            line-height: 40upx;
                            padding-top: 12upx;
                        }
                        .img_02{
                            width: 90upx;
                            height: 90upx;
                        }
                    }
                }
            }
            }
        .return_record {
            .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
                top: -150upx;
                width: 500upx;
                height: 320upx;
                border-radius: 20upx;
                overflow: hidden;
                position: relative;
            }
            .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
                padding: 0upx;
            }
            .popub_box{
                box-sizing: border-box;
                padding: 61upx 114upx 0;
                font-size: $uni-font-size-base;
                color:$uni-color-664e37 ;
                line-height: 50upx;
                text-align: center;
                .cancel_icon{
                    position: absolute;
                    top: 14upx;
                    right: 24upx;
                    font-size: 30upx;
                    color: $uni-color-876a48;
                    transform: rotate(-45deg);
                }
            }
            .popub_btn{
                width: 100%;
                height: 100upx;
                position: absolute;
                bottom: 0upx;
                left: 0upx;
                background-color: #eeeeee;
                display: flex;
                font-size: $uni-font-size-base;
                .fa_btn{
                    width: 50%;
                    height: 100upx;
                    line-height: 100upx;
                    text-align: center;
                }
                .cancel{
                    background-color: $uni-color-fffbf0;
                    color: $uni-color-664e37;
                }
                .confirm{
                    background-color:$uni-color-fcb300;
                    color: #ffffff;
                }
            }
        }
        .img{
            width: 100%;
            height: 100%;
        }
        .button_box{
            box-sizing: border-box;
            position: fixed;
            bottom: 20upx;
            left: 0upx;
            width: 100%;
            padding: 0 113upx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .relative_t{
                position: relative;
                top: -24upx;
            }
            .button_box_list{
                display: flex;
                flex-direction: column;
                align-items: center;
                color: #ffffff;
                .button{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-align: center;
                    font-size: 20upx;
                    border-radius: 50%;
                    background-color: $uni-color-fcb300;
                    margin-bottom: 14upx;
                    .begin_r{
                        font-size: 70upx;
                    }
                    .begin_l{
                        font-size: 34upx;
                    }
                    .begin_b{
                        font-size: 26upx;
                    }
                    .begin_s{
                        font-size: 45upx;
                    }.begin_w{
                        font-size: 26upx;
                    }
                }
                .button_b{
                    width: 140upx;
                    height: 140upx;
                }
                .button_s{
                    width: 80upx;
                    height: 80upx;
                }
                .button_s_t{
                    font-size: $uni-font-size-13;
                    line-height: 38upx;
                }
                .button_s_b{
                    font-size:$uni-font-size-base;
                    line-height: 48upx;
                }
            }

        }
        .button_begin{
            justify-content: center;
            bottom:53upx;
        }
    }
</style>